$(function () {

  // 一、推荐活动模块页面渲染及左右箭头的点击事件
  // 1、推荐活动模块页面渲染
  let activeData = [
    {
      src: './img/Play/img/_6329355404511.jpeg',
      title: '2022可持续发展高校创新挑战赛',
      num: 563
    },
    {
      src: './img/Play/img/_632ab06840ddb.png',
      title: '【产学研】高校实训课&Open Day',
      num: 714
    },
    {
      src: './img/Play/img/_632933c9b32c7.png',
      title: '【校园行】“玩有引力”校园行活动',
      num: 929
    },
    {
      src: './img/Play/img/_6329341b006bd.png',
      title: '【暑期训练营】YOUNG葱计划暑期训练营',
      num: 1020
    }
  ]
  const newActiveDataData = activeData.map(function (item, i) {
    const { src, title, num } = item
    return ` <li>
            <a href="javascript:;">
              <div class="pic">
                <img src="${src}" alt="">
              </div>
              <h4>
                ${title}
              </h4>
              <div class="info">
                <i class="iconfont icon-zuji"></i> <span>${num}</span>
              </div>
            </a>
          </li>`
  }).join('')

  $('.active-item').html(newActiveDataData)

  //  2、给右箭头添加点击事件
  let i = 2
  $('.active .next').on('click', function () {

    let index0 = i - 2   // 第一张图片下标
    let index1 = i - 1    // 第二张图片下标
    let index2 = i     // 第三张图片下标
    let index3 = i + 1   // 第四张图片下标


    if (index0 < 0 || index3 >= activeData.length) return
    // 上一张图片隐藏
    $(this).siblings('.active-content').find('li').eq(index0).stop().hide()
    // 下一张图片显示
    $(this).siblings('.active-content').find('li').eq(index3).stop().show()
    // 左箭头和内部的字体图标更改颜色
    if (index3 === activeData.length - 1) {
      $(this).css('backgroundColor', '#f6f7fa').find('.iconfont').css('color', '#6b7386')

      // 右箭头和内部的字体图标更改颜色
      $(this).parents('.active').find('.prev').css('backgroundColor', '#fff4eb')

      $(this).parents('.active').find('.icon-zuobian').css('color', '#ff9e4b')
    }
  })

  //  3、给右箭头添加点击事件

  $('.active .prev').on('click', function () {

    let index0 = i - 2   // 第一张图片下标
    let index1 = i - 1    // 第二张图片下标
    let index2 = i     // 第三张图片下标
    let index3 = i + 1   // 第四张图片下标

    if (index0 < 0 || index3 >= activeData.length) return
    // 上一张图片隐藏
    $(this).siblings('.active-content').find('li').eq(index3).stop().hide()
    // 下一张图片显示
    $(this).siblings('.active-content').find('li').eq(index0).stop().show()
    // 右箭头和内部的字体图标更改颜色
    if (index0 === 0) {

      $(this).css('backgroundColor', '#f6f7fa').find('.iconfont').css('color', '#747386')

      // 右箭头和内部的字体图标更改颜色
      $(this).parents('.active').find('.next').css('backgroundColor', '#fff4eb')

      $(this).parents('.active').find('.icon-youbian').css('color', '#6b7386').css('color', '#ffa54b')
    }
  })

  // 二、热门栏目模块页面渲染及左右箭头的点击事件

  // 1、右箭头的点击事件
  let num = 0
  $('.column .next').click(function () {
    num = 2

    let num0 = num - 2   // 第一张图片下标
    let num1 = num - 1    // 第二张图片下标
    let num2 = num    // 第三张图片下标
    let num3 = num + 1   // 第四张图片下标
    if (num3 >= 5) return
    $('.column-pane li').eq(num0).stop().hide()
    $('.column-pane li').eq(num3).stop().show()
    num++
    if (num3 === 4) {
      // // 左箭头和内部的字体图标更改颜色

      $(this).css('backgroundColor', '#f6f7fa').find('.iconfont').css('color', '#6b7386')

      // 右箭头和内部的字体图标更改颜色
      $('.column .prev').css('backgroundColor', '#fff4eb')
      $('.column .prev .iconfont').css('color', '#ff983f')

    }
    console.log(num);

  })
  console.log(num);

  // 2、左箭头的点击事件
  $('.column .prev').click(function () {
    // if ()
    $('.column-pane li').eq(0).stop().show()
    $('.column-pane li').eq(1).stop().show()
    $('.column-pane li').eq(3).stop().show()
    $('.column-pane li').eq(4).stop().hide()
    $('.column-pane li').eq(5).stop().hide()


    // // 左箭头和内部的字体图标更改颜色

    $(this).css('backgroundColor', '#f6f7fa').find('.iconfont').css('color', '#c5a591')
  })
  // 右箭头和内部的字体图标更改颜色
  $('.column .prev').css('backgroundColor', '#fff4eb')
  $('.column .prev .iconfont').css('color', '#ffa43f')







})